---
comments: false
disable_fancybox: false
---

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="js/shufaDictJS.js"></script>
    <link rel="stylesheet" href="css/shufaDictCSS.css">
    <link rel="stylesheet" href="jizi2_switch.css">
    <!-- <script src="jizi2_switch.js"></script> -->
    <script src="jizi2_next_mi.js"></script>
</head>
<style>
    .switch_container {
        position: absolute;
        top: 10px;
        left: 10px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        width: 70px;
        height: 30px;
        display: flex;
        /* background-color: brown; */
        align-items: center;
        justify-content: center;
    }
</style>

<body>
    <div id="buttonContainer">
        <div id="backButton"></div>
    </div>
    <div id="container">
        <div id="img-wrapper">
            <img id="hiddenImage" class="hidden-img" src="images/m1.png" alt="隐藏图片" onclick="return false;">
            <div id="loading_overlay">
                <img id="loadingImage" src="images/grid.svg" />
            </div>
        </div>
    </div>
    <div class="button-container">
        <img id="button1" src="images/mizige.png" alt="按钮1" width="50" height="50" onclick="return false;">
        <!-- <img id="button2" src="images/remove-background.png" alt="按钮2" width="50" height="50"
            onclick="toggleUnderline2(this);">
        <img id="button3" src="images/upscale.png" alt="按钮3" width="30" height="30" onclick="toggleUnderline3(this);"> -->
    </div>
    <!-- <div class="text-button-container">
        <button class="text-button" onclick="textButtonAction1()">添加到集字</button>
        <button class="text-button badge-container" onclick="textButtonAction2()">开始集字
            <span id="imageBadge" class="badge">0</span>
        </button>
    </div> -->
    <div id="overlay" class="overlay"></div>
    <div id="modal" class="modal">
        <img id="closeModalBtn" class="close-btn" src="images/close.png" width="30" height="30"
            onclick="return false;"></img>
        <div class="button-container">
            <img id="modalButton1" src="images/mc1.png" alt="按钮1" onclick="return false;">
            <img id="modalButton2" src="images/mc2.png" alt="按钮2" onclick="return false;">
            <img id="modalButton3" src="images/mc3.png" alt="按钮3" onclick="return false;">
            <img id="modalButton4" src="images/mc4.png" alt="按钮3" onclick="return false;">
        </div>

        <div class="switch_container">
            <div class="switch">
                <input id="one" class="input" type="checkbox" />
                <label for="one" class="slider"></label>
                <label for="one" class="label"></label>
            </div>
        </div>
    </div>
</body>
<script>

    setupUI();
    mi_setupUI();
    setupSwitch();
    setupPopup();
    
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';

    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';

    function textButtonAction1() {
        saveImageUrl()
    }
    function textButtonAction2() {
        window.location.href = "jizi.html";
    }
    // 存储图片 URL
    function saveImageUrl() {
        var imgUrl = localStorage.getItem('dict_img')
        var name = localStorage.getItem('dict_name')
        var title = localStorage.getItem('dict_title')
        var id = localStorage.getItem('dict_id')

        var data = {
            'dict_img': imgUrl, 'dict_name': name, 'dict_title': title,
            'dict_id': id
        };

        let imageUrls = JSON.parse(localStorage.getItem('imageUrls')) || [];
        imageUrls.push(data);
        localStorage.setItem('imageUrls', JSON.stringify(imageUrls));
        updateBadge();
    }
    // 获取所有存储的图片 URL
    function getImageUrls() {
        return JSON.parse(localStorage.getItem('imageUrls')) || [];
    }
    // 更新徽章显示
    // function updateBadge() {
    //     const badge = document.getElementById('imageBadge');
    //     const count = getImageCount();
    //     if (count === 0) {
    //         badge.style.display = 'none';
    //     } else {
    //         badge.style.display = 'flex';
    //         badge.textContent = count;
    //     }
    // }

    // 获取存储的图片数量
    function getImageCount() {
        const imageUrls = getImageUrls();
        return imageUrls.length;
    }
    // 页面加载时更新徽章
    // document.addEventListener('DOMContentLoaded', updateBadge);
    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
        sessionStorage.setItem('returnedFromDetail', 'true');
        window.history.back()

    });

    function setupSwitch() {
        var checkboxes = document.querySelectorAll('input[type="checkbox"]');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].addEventListener("change", function () {
                updateBugs(this);
            });
            checkboxes[0].checked = true;
        }
    }
    function updateBugs(changedElement) {
        var checkedCount = document.querySelectorAll('input:checked').length;
        var hiddenImage = document.getElementById("hiddenImage");
            if (checkedCount === 1) {
                isSwitchOn = true
                hiddenImage.style.display = 'block';
            } else {
                isSwitchOn = false
                hiddenImage.style.display = 'none';
            }
    }
</script>

</html>